<template>
  <div id="container"></div>
</template>
    
<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

onMounted(() => {
    initMap()
});
const initMap = ()=>{
    AMapLoader.load({
    key: "251bbaadc0b5dbe21d3b8648104661cc", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      var buildingLayer = new AMap.Buildings({ zIndex: 130, zooms: [16, 20] });
      var options = {
        hideWithoutStyle: false, //是否隐藏设定区域外的楼块
        areas: [
          {
            //围栏1
            //visible:false,//是否可见
            rejectTexture: true, //是否屏蔽自定义地图的纹理
            color1: "00ff00", //楼顶颜色
            color2: "ff00ff", //楼面颜色
            path: [
              [116.473606, 39.995997],
              [116.473005, 39.995482],
              [116.472442, 39.994971],
              [116.472267, 39.994801],
              [116.471307, 39.995442],
              [116.471242, 39.995446],
              [116.471163, 39.995403],
              [116.4703, 39.994639],
              [116.469916, 39.994315],
              [116.469194, 39.993719],
              [116.469032, 39.993863],
              [116.468815, 39.994108],
              [116.468625, 39.994355],
              [116.468471, 39.99466],
              [116.468421, 39.994811],
              [116.468366, 39.995156],
              [116.468306, 39.996157],
              [116.468308, 39.996557],
              [116.468483, 39.996884],
              [116.468834, 39.997188],
              [116.469481, 39.997764],
              [116.470511, 39.998708],
              [116.471404, 39.999517],
              [116.471553, 39.999568],
              [116.471713, 39.999563],
              [116.471929, 39.999463],
              [116.473228, 39.998584],
              [116.474008, 39.998046],
              [116.474541, 39.997674],
              [116.474541, 39.997576],
              [116.474604, 39.997049],
              [116.474586, 39.996895],
              [116.474179, 39.996516],
              [116.473585, 39.995997],
              [116.473606, 39.995997],
            ],
          },
          {
            //围栏2
            color1: "pink",
            color2: "pink",
            path: [
              [116.474609, 39.993478],
              [116.474489, 39.993495],
              [116.473693, 39.994009],
              [116.472898, 39.994546],
              [116.472837, 39.9946],
              [116.4728, 39.994653],
              [116.472779, 39.994745],
              [116.47282, 39.994815],
              [116.47491, 39.99655],
              [116.475041, 39.996607],
              [116.47525, 39.996643],
              [116.475715, 39.996686],
              [116.475947, 39.996688],
              [116.476103, 39.996658],
              [116.477228, 39.995932],
              [116.477261, 39.995833],
              [116.477264, 39.995729],
              [116.477205, 39.995625],
              [116.47642, 39.994899],
              [116.474854, 39.993558],
              [116.47469, 39.99348],
              [116.474609, 39.993478],
            ],
          },
        ],
      };

      buildingLayer.setStyle(options); //此配色优先级高于自定义mapStyle
      map = new AMap.Map("container", {
        pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
        viewMode: "3D", //地图模式
        terrain: true, //开启地形图
        rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
        pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
        zoom: 17, //初始化地图层级
        rotation: -15, //初始地图顺时针旋转的角度
        zooms: [2, 20], //地图显示的缩放级别范围
        // center: [108.953509, 34.265619], // 初始化地图中心点位置

        //自定义区域楼块
        center: [116.472268, 39.995693],
        features: ["bg", "point", "road"],
        layers: [AMap.createDefaultLayer(), buildingLayer],
        showBuildingBlock: true,
        // showIndoorMap:false,
        // showLabel:false,
      });

      //自定义区域楼块
      new AMap.Polygon({
        bubble: true,
        fillOpacity: 0.4,
        strokeWeight: 1,
        path: options.areas[0].path,
        map: map,
      });
      new AMap.Polygon({
        bubble: true,
        fillColor: "pink",
        fillOpacity: 0.2,
        strokeWeight: 1,
        path: options.areas[1].path,
        map: map,
      });

      const marker = new AMap.Marker({
        position: [116.472268, 39.995693], //位置
        draggable: true,
        cursor: "move",
        offset: new AMap.Pixel(-13, -30),
      });
      map.add(marker); //添加到地图·

      AMap.plugin(
        ["AMap.ControlBar", "AMap.ToolBar", "AMap.Scale"],
        function () {
          //异步加载插件
          var controlBar = new AMap.ControlBar({
            //控制地图旋转插件
            position: {
              right: "10px",
              top: "10px",
            },
          });
          map.addControl(controlBar);
          var toolBar = new AMap.ToolBar({
            //地图缩放插件
            position: {
              right: "40px",
              top: "110px",
            },
          });
          map.addControl(toolBar);
          var scale = new AMap.Scale();
          map.addControl(scale);
        }
      );
      function showInfoClick(e){
        console.log(`output->经度`,'经度'+e.lnglat.getLng(),'纬度'+e.lnglat.getLat())
    }
    map.on('click', showInfoClick);
    })
    .catch((e) => {
      console.log(e);
    });
}
onUnmounted(() => {
  map?.destroy();
});
</script>
    
<style lang="scss">
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 900px;
}
</style>